<template>
  <div class="hot-post-list">
    <div class="hot-post-header">
      <h3>热门帖子</h3>
      <el-tooltip content="根据点赞、评论、收藏和浏览量综合计算的热度排行">
        <el-icon><InfoFilled /></el-icon>
      </el-tooltip>
    </div>

    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <div v-else class="post-items">
      <div v-for="(post, index) in hotPosts" :key="post.id" class="post-item" @click="gotoDetail(post.id)">
        <div class="rank">{{ index + 1 }}</div>
        <div class="post-info">
          <div class="post-title">
            <span>{{ post.content.length > 20 ? post.content.substring(0, 20) + '...' : post.content }}</span>
            <span class="heat-value">热度: {{ post.heat }}</span>
          </div>
          <div class="post-meta">
            <span class="topic" v-if="post.topicTitle">#{{ post.topicTitle }}</span>
            <span class="stats">
              <el-icon><View /></el-icon> {{ post.viewNum }}
              <el-icon><ChatDotRound /></el-icon> {{ post.commentNum }}
              <el-icon><Star /></el-icon> {{ post.collectNum }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHotPosts } from '@/api/post/post.js'
import { useRouter } from 'vue-router'
import { InfoFilled, View, ChatDotRound, Star } from '@element-plus/icons-vue'

const router = useRouter()
const hotPosts = ref([])
const loading = ref(true)

onMounted(() => {
  fetchHotPosts()
})

const fetchHotPosts = () => {
  const account = localStorage.getItem('account') || 0
  getHotPosts(account, 10).then(res => {
    hotPosts.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

const gotoDetail = (id) => {
  router.push({ name: 'postDetail', params: { id: id } })
}
</script>

<style scoped>
.hot-post-list {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.hot-post-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.hot-post-header h3 {
  margin: 0;
  margin-right: 8px;
  font-size: 18px;
  color: #333;
}

.loading-container {
  padding: 10px 0;
}

.post-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-item {
  display: flex;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.post-item:hover {
  background-color: #f5f7fa;
}

.rank {
  width: 24px;
  height: 24px;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
  margin-top: 5px;
}

.post-item:nth-child(1) .rank {
  background-color: #ff4d4f;
  color: white;
}

.post-item:nth-child(2) .rank {
  background-color: #ff7a45;
  color: white;
}

.post-item:nth-child(3) .rank {
  background-color: #ffa940;
  color: white;
}

.post-info {
  flex: 1;
}

.post-title {
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.heat-value {
  color: #ff4d4f;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}

.topic {
  color: #1890ff;
}

.stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats .el-icon {
  margin-right: 2px;
}
</style>
